<template>
    <!-- 添加外层容器用于居中 -->
      <div class="board" :class="collaspe ? 'active' : ''">
        <header class="header">
          <topNav @toggleNav="toggleNav" @search="handleSearch"></topNav>
        </header>
        <aside class="aside">
          <asideNav :logoColor="logoColor"></asideNav>
        </aside>
        <main class="main">
          <router-view v-slot="{ Component }">
            <transition name="fade">
              <component :is="Component" />
            </transition>
          </router-view>
        </main>
      </div>
  </template>
  
  <script setup>
  import { ref } from "vue";
  import { useRouter } from "vue-router";
  import topNav from "@/views/admin/misc/publicParts/topNav.vue";
  import asideNav from "@/views/admin/misc/publicParts/asideNav.vue";
  
  const logoColor = "";
  const collaspe = ref(false);
  const router = useRouter();
  
  const toggleNav = (res) => {
    collaspe.value = res;
  };
  
  const handleSearch = (data) => {
    router.push({
      path: "/home",
      query: { search: data.trim() },
    });
  };
  </script>
  
  <style lang="less" scoped>
  /* 新增的居中容器 */
  .board {
    box-sizing: border-box;
    width: 100vw; /* 占据容器全部宽度 */
    height: 100vh; /* 占据容器全部宽度 */
    position: relative;
    /* 确保内容不会超出边界 */
    overflow: hidden;
    opacity: 0.99;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
  
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: 60px 1fr;
    gap: 0;
    background: var(--bs-light-color);
  
    /* 左侧导航栏折叠时的样式 */
    &:not(.active) .aside {
      grid-column: 1;
      width: 220px;
      transition: all 0.3s ease;
    }
  
    &.active .aside {
      grid-column: 1;
      width: 64px;
      transition: all 0.3s ease;
    }
  
    .header {
      background: var(--bs-bg-color);
      grid-column: 2;
      grid-row: 1;
      border-radius: 8px 8px 0 0;
      // z-index: 10; /* 确保顶部导航栏在最上层 */
      position: relative;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }
  
    .aside {
      background: #f0f2f5;
      grid-column: 1;
      grid-row: 1 / span 2;
      border-radius: 8px 0 0 8px;
      overflow: hidden;
      transition: all 0.3s ease;
    }
  
    .main {
      background: var(--bs-bg-color);
      background-size: cover;
      grid-column: 2;
      grid-row: 2;
      overflow: auto;
      min-height: 0;
      border-radius: 0 0 8px 0;
      display: flex;
      flex-direction: column;
      padding: 14px;
      position: relative;
      z-index: 1;
  
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.65);
        backdrop-filter: blur(2px);
        z-index: -1;
      }
  
      /* 为内容区域添加内部滚动 */
      > * {
        max-width: 100%;
      }
    }
  }
  
  /* 响应式设计：屏幕变窄时调整布局 */
  @media (max-width: 1200px) {
    .board {
      grid-template-columns: 120px 1fr;
  
      .aside {
        width: 120px !important;
      }
  
      &.active .aside {
        width: 60px !important;
      }
    }
  }
  
  @media (max-width: 900px) {
    .app-container {
      padding: 10px;
    }
  
    .board {
      grid-template-columns: 80px 1fr;
  
      .aside {
        width: 80px !important;
      }
  
      &.active .aside {
        width: 50px !important;
      }
    }
  }
  
  @media (max-width: 600px) {
    .board {
      grid-template-columns: 1fr;
      grid-template-rows: 60px auto 1fr;
  
      .header {
        grid-column: 1;
        grid-row: 1;
        border-radius: 8px 8px 0 0;
      }
  
      .aside {
        grid-column: 1;
        grid-row: 2;
        width: 100% !important;
        height: auto;
        border-radius: 0;
      }
  
      .main {
        grid-column: 1;
        grid-row: 3;
        border-radius: 0 0 8px 8px;
      }
    }
  }
  
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
    opacity: 0;
  }
  </style>